<template>
	<view class="home">
		<navbar :isback='false' title="达人商单" backgroundColor='rgba(248, 248, 253, 1)'>
			<view slot="left" class="hleft">
				<!-- <image class="gllogo" src="/static/LOGO.png" /> -->
			</view>
		</navbar>
		<!-- #ifdef APP-PLUS -->
		<!-- <view class="immerse"></view> -->
		<!-- #endif -->
		<view class="newcontent">
			<BaoMing :baotitle="baotitle" :baisub="baisub" :btntitle="btntitle" lei="pai" @getbtn="getbtn"></BaoMing>
			<view class="twoxian"></view>
			<view class="paiview">
				<text class="paitit">派单记录</text>
				<view class="pailist">
					<view class="paiitem" v-for="(item, index) in 10" :key="index">
						<image class="itemtu" src="/static/new/hone.png" />
						<view class="painav">
							<view class="navone">
								<text class="navtit txt">金豪美发</text>
								<text class="navtime">2024-05-25 15:52</text>
							</view>
							<text class="tan">实探宝子们快来报名啦</text>
						</view>
						<view class="gen">跟进</view>
					</view>
				</view>
			</view>
		</view>
		<Tabbar :tabIndex="3"></Tabbar>
</view>
</template>
<script>
import BaoMing from '@/components/BaoMing/BaoMing'
export default {
	components: {
		BaoMing
	},
	data() {
		return {
			bgcolor: '#fff',
			baotitle: '派发商单',
			baisub: '从派单到结算，清晰不忙乱',
			btntitle: '开始派单',
			list: [],
			page: 1,
			limit: 10,
			last_page: 1,
			status: "loadmore",
		}
	},
	components: {
	},
	computed: {
	},

	mounted() {

	},
	created() {
		uni.hideTabBar()
	},
	async onLoad() {
		this.getList()
	},
	beforeCreate() {
		uni.hideTabBar()
	},
	async onShow() {

	},
	onReachBottom: function () {
	},
	methods: {
		async getList() {//列表数据
			let res = await this.$u.api.myProject({
				// pagesize: this.limit,
				page: this.page
			});
			this.last_page = res.last_page;
			let list = res.data;
			this.list = this.page == 1 ? list : [...this.list, ...list];
			if (this.page >= this.last_page) {
				this.status = 'nomore';
			}
		},
		loadmore() {
			let page = this.page;
			// let last_page = this.last_page;
			if (this.status == 'loadmore') {
				this.page++;
				this.getList();
			}
		},
		getbtn() {
			this.navrouter("/pages_subject/twoPage/Pai/TPoi");
		}
	}
}
</script>

<style lang="scss" scoped>
.newcontent {
	min-height: 100vh;
	background-color: #f8f8fd;
	// padding-bottom: 100px;
	padding: 0px 20px 100px;

	.twoxian {
		border: 1px dashed rgba(232, 232, 232, 1);
		display: block;
		margin: 20px 0 15px;
	}

	.paiview {
		.paitit {
			display: block;
			font-size: 14px;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
			margin-bottom: 10px;
		}

		.pailist {
			display: flex;
			flex-direction: column;

			.paiitem {
				padding: 20px;
				border-radius: 12px;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0px 6px 10px rgba(119, 102, 231, 0.08);
				margin-bottom: 10px;
				display: flex;
				flex-direction: row;
				align-items: center;

				.itemtu {
					width: 36px;
					height: 36px;
					border-radius: 5px;
					margin-right: 10px;
				}

				.painav {
					flex: 1;
					display: flex;
					flex-direction: column;

					.navone {
						display: flex;
						flex-direction: row;

						.navtit {
							max-width: 80%;
							display: inline-block;
							font-size: 12px;
							font-weight: 700;
							color: rgba(51, 51, 51, 1);
						}

						.navtime {
							font-size: 10px;
							font-weight: 400;
							display: inline-block;
							margin-left: 10px;
							color: rgba(153, 153, 153, 1);
						}
					}

					.tan {
						font-size: 12px;
						font-weight: 400;
						display: block;
						margin-top: 5px;
						color: rgba(102, 102, 102, 1);
					}
				}

			}

			.gen {
				margin-left: auto;
				width: 60px;
				height: 36px;
				opacity: 1;
				border-radius: 6px;
				background: rgba(248, 248, 253, 1);
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 14px;
				font-weight: 400;
				color: rgba(119, 102, 231, 1);

				border: 1px solid rgba(220, 214, 255, 0.5);
			}
		}
	}

}</style>
